<script>
export default {
  name: 'ContentPage1',
  data() {
    return {
      companies: [
        { id: 1, name: '桂林国际电线电缆集团有限责任公司' },
        { id: 2, name: '瓦房店第一轧机轴承制造有限公司' },
        { id: 3, name: '景津环保股份有限公司' },
        { id: 4, name: '贵州仁怀市飨客酒业有限公司' },
        { id: 5, name: '国创氢能科技有限公司' },
        { id: 6, name: '大连钰霖电机有限公司' },
        { id: 7, name: '中擎电机有限公司' },
        { id: 8, name: '沈鼓集团股份有限公司' },
        { id: 9, name: '鞍钢集团有限公司' },
        { id: 10, name: '辽宁亿芯电线电缆制造有限公司' },
        { id: 11, name: '沈阳伟宸起重设备有限公司' },
        { id: 12, name: '辽宁佳义电缆有限公司' },
        { id: 13, name: '沈阳申元气体压缩机有限责任公司' },
        { id: 14, name: '辽宁羿策图灵信息有限公司' },
        { id: 15, name: '沈阳沈缆四环电缆制造有限公司' },
        { id: 16, name: '石家庄天人农业机械装备有限公司' },
        { id: 17, name: '山东中海达金属科技有限公司' },
        { id: 18, name: '冠县鼎恒金属材料有限公司' },
        { id: 19, name: '聊城腾势交通设施有限公司' },
        { id: 20, name: '山东科兹曼复合材料有限公司...' }
      ]
    }
  }
}
</script>

<template>
  <div class="main-container">
    <!-- 背景层 -->
    <div class="background-layer">
      <!-- 内容容器（固定宽度居中） -->
      <div class="content-wrapper">
        <!-- 左侧区域 -->
        <div class="left-section">
          <div class="corner-box"></div>
          <div class="pingtai-jieshao">
            <h5>打造面向装备制造业的产业生态</h5>
            <h1>迈迪优链<br><span>数字化综合服务平台</span></h1>
            <h4>搭建企业云端展厅，为企业提供线上展示展销云平台；举办线下供需对接活动，助力商协会“圈子消费，内部循环”；
            精准对接全国链主企业，助力优选供应链实现全国大循环；建立供应链上下游的信任桥梁，助力供应链金融授信。</h4>
          </div>
        </div>

        <!-- 右侧区域 -->
        <div class="right-section">
          <div class="service-comp-title">典型客户列表</div>
          <div class="service-comp-table">
            <div class="service-comp-header">
              <div class="service-comp-xh">序号</div>
              <div class="service-comp-name">企业名称</div>
            </div>

            <div class="service-comp-scroll">
              <div
                  class="service-comp-body"
                  v-for="company in companies"
                  :key="company.id"
              >
                <div class="service-comp-xh">{{ company.id }}</div>
                <div class="service-comp-name">{{ company.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.main-container {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.background-layer {
  width: 100%;
  height: 758px;
  background-color: #000f24;
  background-image: url('../../assets/home/home-bg1.png');
  background-size: auto 100%;
  background-position: center center;
  position: relative;
  z-index: 0;
}

/* 新增的内容容器 */
.content-wrapper {
  position: relative;
  width: 1200px; /* 固定宽度 */
  height: 100%;
  margin: 0 auto; /* 居中 */
  z-index: 2;
}

.left-section {
  width: 416px;
  height: 365px;
  position: absolute;
  left: 0;
  top: 124px;
  background-color: #071d49;
  background-size: 100% 100%;
  padding: 70px 38px;
}

.right-section {
  position: absolute;
  right: 0;
  top: 113px;
  width: 440px;
  height: 360px;
  background-color: #002e70;
  padding: 110px 42px 42px 42px;
}

/* 左上角黄色边框盒子 */
.corner-box {
  width: 148px;
  height: 166px;
  border: 12px solid #f6b021;
  position: absolute;
  top: -20px;
  left: -24px;
  z-index: -1;
}

/* 平台介绍内容样式 */
.pingtai-jieshao {
  text-align: left;
  color: white;
}

.pingtai-jieshao h5 {
  font-size: 16px;
}

.pingtai-jieshao h1 {
  font-size: 46px;
  line-height: 1.3;
  margin-bottom: 20px;
}

.pingtai-jieshao h1 span {
  color: #f2a11b;
}

.pingtai-jieshao h4 {
  font-size: 14px;
  line-height: 1.6;
  font-weight: normal;
}

/* 右侧内容区样式 */
.service-comp-title {
  font-weight: 700;
  font-size: 36px;
  line-height: 36px;
  color: #f2a11b;
  position: absolute;
  top: 50px;
  left: 42px;
}

.service-comp-table {
  background-color: #1a437f;
  width: 100%;
  height: 340px;
  overflow: hidden;
}

.service-comp-scroll {
  height: 400px;
  overflow-y: auto;
}

.service-comp-header,
.service-comp-body {
  display: flex;
  padding: 8px 15px;
  background-color: #1a437f;
  text-align: left;
}

.service-comp-header {
  font-weight: bold;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.service-comp-body {
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.service-comp-xh {
  width: 30px;
  color: white;
  text-align: center;
}

.service-comp-name {
  flex: 1;
  color: white;
  padding-left: 10px;
}

/* 滚动条样式 */
.service-comp-scroll::-webkit-scrollbar {
  width: 6px;
}

.service-comp-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.service-comp-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.service-comp-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}
</style>